<template>
  <div class="departments">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构" name="first">
          <!-- 内容 -->
          <div class="content">
            <div class="header">
              <tree-item :isroot="true" @add="add"/>
            </div>
            <div class="body">
              <!-- 
                data就是给tree绑定的数据,要绑树形结构的数据（也就是元素里有子元素（要有children））
                default-expand-all 是否默认展开全部
                expand-on-click-node 用来设置是否允许点击节点任意位置都能展开折叠
                                      给false代表不允许，那就意味着只能通过左边的三角展开和折叠

               -->
              <el-tree
                 v-loading="isLoading" 
                :data="data"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
              >
                <!-- 这里用的是一个废弃的插槽语法，其中slot-scope="obj" -->
                <!-- 代表用obj拿到插槽内部暴露出来的数据 -->
                <!-- v-slot="obj" obj里有node和data两个属性 -->
                <!-- node代表当前这个节点的信息，data代表当前这个节点里的数据 -->
                <!-- 如果我想拿到data，就得obj.data，麻烦 -->
                <!-- 所以，可以加大括号代表解构出这个obj里的属性 -->
                <!-- 本项目node属性没啥用，data属性有用，所以我只要拿data -->
                <template v-slot="{ data }">
                  <tree-item :item="data" @del="loadData" @add="add" @view="view"/>
                </template>
              </el-tree>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 对话框 -->
      <!-- 
        $event在原生标签里代表事件对象
        $event在组件里，代表子组件传递过来的数据
       -->
      <!-- <dept-dialog :pid="currentId" :showDialog="showDialog" @update:showDialog="showDialog = $event"/> -->
      
      <!-- .sync本质上就是个语法糖 -->
      <!-- 你给
              属性.sync="数据", 他就会生成 @update:属性="数据 = $event"
          例如，你给 showDialog.sync="showDialog"， 他就会生成  @update:showDialog="showDialog = $event"
       -->
      <dept-dialog ref="dept" :pid="currentId" :showDialog.sync="showDialog" @reload="loadData"/>
    </el-card>
  </div>
</template>

<script>
// 导入组件
import TreeItem from './components/TreeItem.vue'
import DeptDialog from './components/DeptDialog.vue'
// 导入接口
import { deptListAPI, deptDetailAPI } from '@/api/department'
// 导入工具
import { arrayToTree } from '@/utils'
export default {
  name: 'departments',
  components: {
    TreeItem,
    DeptDialog
  },
  created () {
    // 加载数据
    this.loadData()
  },
  methods: {
    add (id) {
      // 把要操作的id保存起来，就能给对话框
      this.currentId = id
      // 显示出对话框
      this.showDialog = true
    },

    async view (id) {
      // 根据id查出这部门的数据
      const res = await deptDetailAPI(id)
      // 显示出对话框
      this.showDialog = true
      // 传递currentId
      this.currentId = res.data.pid
      // 赋值给对话框
      this.$refs.dept.form = res.data
      // 细节：不能直接赋值res.data，不然跟form还是指向同一个对象
      // form变了oldForm也会跟着变，就不能起到想保存原本数据的作用了
      this.$refs.dept.oldForm = { ...res.data }
    },
    // 加载数据的方法
    async loadData () {
      // 发请求
      const res = await deptListAPI()
      // 把请求到的数据先都放到arr里
      // const arr2 = res.data.depts

      // 得到了一级
      const list = arrayToTree(res.data.depts, '')
      this.data = list
      // 结束加载状态
      this.isLoading = false

      // // 演示找2级的代码
      // const list2 = arrayToTree(res.data.depts, "604e2251b205b95968e1312c")
      // console.log(list2)

      /*
      // 准备一个装1级节点的数组
      const list = []
      // 进行遍历
      arr.forEach(v1 => {
        // 找到1级
        if (v1.pid === '') {
          list.push(v1)
          // 每个1级还要继续找他的2级（找children）
          const children = []
          arr.forEach( v2 => {
            if (v2.pid === v1.id) {
              children.push(v2)
            }
          })
          // 把找到的二级数组放到1级这个对象children属性里
          v1.children = children
        }
      })
      // console.log(list)
      this.data = list
      */
    }
  },
  data () {
    return {
      // 默认显示加载状态
      isLoading: true,
      // 当前要操作的id
      currentId: '',
      // 控制对话框的显示和隐藏
      showDialog: false,
      activeName: 'first',
      // tree绑定的data
      data: []
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px;
  .content {
    padding: 40px 100px;
    .header {
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
  }
}
</style>
